<template>
	<view class="content">
		<!-- <image src="" mode=""></image>
		 -->
  <view style="position: absolute;top: 90rpx;left: 10rpx;"  @click="leftClick">
    <u-icon name="arrow-leftward" size="23"></u-icon>
  </view>
		<view class="">

		</view>
		<view class="input">
			<view class="input-item">
				<image src="../../static/images/login_acc.png" mode=""></image>
				<input v-model="loginForm.username" type="text" name="" placeholder="請輸入用戶名" id="">
			</view>
			<view class="input-item">
				<image src="../../static/images/login_pw.png" mode=""></image>
				<input v-model="loginForm.email" type="password" name="" placeholder="請輸入郵箱" id="">
			</view>
			<view class="input-bottom">
				<view @click="toUrl('/pages/login/index')">去登錄</view>
				<view @click="toUrl('/pages/register/index')">新用戶注冊</view>
			</view>

		</view>
		<view class="login-btn" @click="login">
			發送臨時密碼
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		findpwd
	} from '@/network/api/user.js'
	export default {
		data() {
			return {
				loginForm: {
					username: "",
					email: "",
				},
			};
		},
		methods: {
      leftClick() {
        uni.navigateBack({
          delta: 1
        })
      },
			async login() {
				if (!this.loginForm.username) {
					return uni.showToast({
						title: "請輸入用戶名",
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				}
				if (!this.loginForm.email) {
					return uni.showToast({
						title: "請輸入郵箱",
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				}
				//uniapp等待弹窗转圈
				uni.showLoading({
					title: '發送中，请稍后...'
				})
				const res = await findpwd(this.loginForm)
				uni.hideLoading()
				if(res.data.code==1){
					uni.showToast({
						title:'發送成功，請留意您的郵箱',
					})
				}else if(res.data.msg){
					 uni.showToast({
						title: res.data.msg,
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: url('../../static/images/login_bg.png') no-repeat;
		background-size: 100vw 100vh;
		position: relative;

		// background-image: url('../../static/images/login_bg.png');
	}

	.input {
		// margin-top: 422rpx;
		position: absolute;
		top: 422rpx;
		left: 50%;
		transform: translate(-50%);
		top: 422rpx;
		width: 650rpx;
		height: 396rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 20rpx 50rpx rgba(125, 122, 248, 0.3);
		opacity: 1;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.input-item {
			width: 574rpx;
			margin: 20rpx 0;
			padding: 20rpx 0;
			border-bottom: 1px solid #E5E7FA;
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}

		}

		.input-bottom {
			width: 574rpx;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #7A7DEE;
		}

	}

	.login-btn {
		position: absolute;
		top: 978rpx;
		left: 50%;
		transform: translate(-50%);
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(80deg, #B9B3F7 0%, #6D6BF6 100%);
		box-shadow: 0rpx 15rpx 30rpx rgba(110, 108, 248, 0.3);
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
		line-height: 88rpx;
	}
</style>
